<template>
  <el-card class="mt box">
    <!-- topBgc -->
    <div class="bgc"></div>
    <!-- title -->
    <!-- rule -->
    <div class="mt btm_btn" v-for="item in textList" :key="item.title">
      <h3>{{ item.title }}</h3>
      <h5 v-for="i in item.text" :key="i">
        {{ i }}
      </h5>
    </div>

    <!-- form -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm form_heart"
    >
      <el-form-item label="预约名称" prop="name">
        <el-select v-model="ruleForm.item" placeholder="请选择项目">
          <el-option label="全科医疗服务" value="全科医疗服务"></el-option>
          <el-option label="专科医疗服务" value="专科医疗服务"></el-option>
          <el-option label="急诊服务" value="急诊服务"></el-option>
          <el-option label="康复服务" value="康复服务"></el-option>
          <el-option label="预防疫苗接种" value="预防疫苗接种"></el-option>
          <el-option label="长期护理服务" value="长期护理服务"></el-option>
          <el-option label="健康咨询服务" value="健康咨询服务"></el-option>
          <el-option label="体检服务" value="体检服务"></el-option>
          <el-option label="孕产服务" value="孕产服务"></el-option>
          <el-option label="医学影像服务" value="医学影像服务"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input
          class="width"
          v-model="ruleForm.phone"
          placeholder="请输入联系方式"
        ></el-input>
      </el-form-item>

      <el-form-item label="预约时间" required>
        <el-form-item prop="date1">
          <el-date-picker
            class="width"
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date1"
          ></el-date-picker>
        </el-form-item>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->

    <div class="btm_btn mt">
      <el-button type="primary" @click="CreateMedical">预约</el-button>
      <el-button @click="reset">重置</el-button>
    </div>

    <!-- bottmBgc -->
    <div class="bgc bgc_btm"></div>
  </el-card>
</template>

<script>
import {saveMedicalDetail} from "@/api";

export default {
  data() {
    return {
      // 规则
      textList: [
        {
          title: "预约规则",
          text: [
            "1、如支付成功后未推送挂号消息,耐心等待或到分诊台确认。",
            "2、每个账号预约限制：限同时挂号三次、每月6次。",
            "3、预约后，如不能到场，请至少提前一天取消挂号。",
            "4、预约开放时间：每天23:00-01:00，2个小时维护时间，暂不支持预约挂号。其他时间正常开放",
            "5、爽约三次暂不可网络预约"
          ]
        }
      ],
      //  提交form表单
      ruleForm: {
        phone: "",
        date1: "",
        item:''
      },
      // 表单验证
      rules: {
        item: [{ required: true, message: "请选择预约项目", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      }
    };
  },

  methods: {
    CreateMedical(){
      saveMedicalDetail({
        "medicalName":this.ruleForm.item ,
        "time": this.ruleForm.date1,
        "phone":this.ruleForm.phone
      }).then(res=>{
        if(res.data){
          this.$message.success('预约成功！')
        }
      })
    },
    reset(){
      this.ruleForm.phone=''
      this.ruleForm.item=''
      this.ruleForm.date1=''
    }
  }
};
</script>

<style scoped>
.mt {
  margin-top: 50px;
}

.width {
  width: 300px;
}

.form_heart {
  margin: 0 auto;
  width: 500px;
  margin-top: 70px;
}

.box {
  width: 85%;
  margin: 0 auto;
  margin-top: 60px;
  padding: 0px !important;
}
/*.bgc {*/
/*  width: 100%;*/
/*  height: 90px;*/
/*  background: url("https://www.zdyfy.com/Content/Main/Base/images/guibg_12.jpg")*/
/*  no-repeat 50%;*/
/*  background-size: cover;*/
/*  transform: rotate(180deg);*/
/*}*/
.bgc_btm {
  transform: none;
}

.title {
  text-align: center;
}

.btm_btn {
  text-align: center;
}
</style>
